<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
  <script type="module" src="../../lib/mixins/property-accessors.js"></script>
</head>
<body>

<script type="module">
import { PropertyAccessors } from '../../lib/mixins/property-accessors.js';

// Apply mixins to base class
class MyElement extends PropertyAccessors(HTMLElement) {

  // Declare observed attributes
  static get observedAttributes() { return ['foo', 'bar']; }

  // Enable accessors and flush any queued property changes
  connectedCallback() {
    this._enableProperties();
  }

  // React to changes
  _propertiesChanged(currentProps, changedProps, oldProps) {
    for (let p in changedProps) {
      this.innerHTML += `${p}: ${changedProps[p]}<br>`;
    }
  }

}

// Generate property accessors for all observed attributes
MyElement.createPropertiesForAttributes();

// Register element
customElements.define('my-element', MyElement);
</script>

<my-element foo="5" bar="10"></my-element>

<script type="module">
import '../../lib/mixins/property-accessors.js';
document.querySelector('my-element').foo = 20;
</script>

</body>
</html>